<template>
  <m-modal
    v-model="visible"
    title="保存设置"
    class="v-backup-setting"
    :width="528"
    cancelText=""
    okText="关闭"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="_content">
      <table border-collapse="collapse">
        <tr>
          <td class="_left-td">
            启用自动保存
          </td>
          <td style="padding: 0">
            <div class="_row">
              <a-switch v-model="useBackup" checked-children="开" un-checked-children="关" @change="changeBackup" />
            </div>
            <div v-if="useBackup" class="_row interval">
              自动保存间隔
              <a-input-number
                v-model="interval"
                style="width: 64px"
                :min="1"
                :precision="0"
                @change="changeInterval"
                @blur="handleBlur"
              />
              分钟
            </div>
          </td>
        </tr>
        <tr>
          <td class="_left-td">
            说明
          </td>
          <td>
            <div style="height: 90px; color: #000">
              <div>1. 打开自动保存后，可以选择历史文件进行恢复。</div>
              <div>2. 发生保存失败情况后，不再自动保存。</div>
            </div>           
          </td>
        </tr>
      </table>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from "src/components/common/Portal.vue";
import Modal from "src/components/common/CustomModal";
import { storage } from "src/util/common";
import { storeKey } from "@/constants/constants";
import { BackupService } from "@/util/BackupManager";
const com = {
  name: "comp-backup-setting",
  components: {
    "m-modal": Modal,
  },
  props: {},
  data() {
    return {
      visible: false,
      interval: storage.get(storeKey.backupInterval) || 15,
      useBackup: storage.get(storeKey.useBackup) || false, 
    };
  },
  created() {

  },
  mounted() {
    this.visible = true;
  },
  methods: {
    handleOk(res) {
      this.visible = false;
      this.$emit("sure", res);
    },
    handleCancel(e) {
      this.visible = false;
      this.$emit("close", e);
    },

    changeBackup(checked) {
      console.log('change000-----', checked);
      storage.set(storeKey.useBackup, checked);
      app.proxy.projects.forEach(project => {
        project.backupManager.useBackup = checked;
        if (checked){
          project.backupManager.startAutoBackup();

        } else {
          project.backupManager.stopAutoBackup();

        }
      });

    },

    changeInterval(value) {
      console.log('change ingterval', value);
      if (!value) return;
      BackupService.updateBackupInterval(value);
    },
    handleBlur(){
      if (!this.interval){
        this.interval = 1;
        this.changeInterval(this.interval);
      }
    }

  },
};

export default com;
export const backupSetting = new Portal(com, { single: true });
export const portal = backupSetting;
</script>
<style lang="scss" scoped>
.v-backup-setting {
  ._content {
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td,th {
      border: 1px solid #E4E3E3;
      padding: 10px;
    }
    ._left-td {
        width: 100px;
    }
  }
  ._row {
    height: 40px;
    padding: 10px;
    &.interval {
      height: auto;
    
    }
    &:last-of-type {
      border-top: 1px solid #E4E3E3;
    }
  }
}
</style>
